<template>
    <div class="flexBox">
        <ul class="userFlex">
            <li v-if="singleValue && modelValue" :class="[link==true? 'rxboxsLink userlidt':'userlidt']">
                <span :class="[!readOnly?'nameTit':'nameTit nameTitcanedit']">{{ modelValue }}</span>
                <span class="canEdit" v-if="!readOnly" @click.stop="removeSingle">
					<i class="iconfont icon-Vue3_delete"></i>
				</span>
            </li>
            <template v-else>
                <li @click="linkSkip" v-for="(label,index) in aryLabel"
                    :class="[link==true? 'rxboxsLink userlidt':'userlidt']">
                    <span :class="[!readOnly?'nameTit':'nameTit nameTitcanedit']">{{ label }}</span>
                    <span class="canEdit" v-if="!readOnly" @click.stop="removeSelect(index)">
					<i class="iconfont icon-Vue3_delete"></i>
				</span>
                </li>
            </template>
            <span v-if="!readOnly" class="addName " @click.stop="handSelect()">
                <my-icon :type="icon?icon:'icon-Vue3_setting'"></my-icon>
      </span>
        </ul>
    </div>
</template>

<script type="text/ecmascript-6">
export default {
    name: "RxBoxs",
    emits: ["update:modelValue", "linkSkip", "buttonSelect", "select"],
    props: {
        modelValue: String,
        readOnly: {
            type: Boolean,
            default: true
        },
        link: {
            type: Boolean,
            default: false
        },
        single: {
            type: Boolean,
            default: false
        },
        showid: {
            type: Boolean,
            default: false
        },
        type: {
            type: String,
        },
        icon: {
            type: String,
            default: 'icon-Vue3_setting'

        },
        singleValue: {
            type: Boolean,
            default: false
        },
    },
    data() {
        return {
            list: [],
            iserror: false,
            val: this.modelValue,
            aryLabel: [],
            aryVal: [],
        }
    },
    mounted() {
        this.init();
    },
    methods: {
        //初始化数据
        init() {
            if (this.singleValue) {
                return;
            }
            this.aryLabel = [];
            this.val = this.modelValue;
            //value 初始格式{label:"张三,李四,王五",value:"1,2,3"}
            var jsonStr = this.val;

            if (!jsonStr) return;
            var json = JSON.parse(jsonStr);
            let label = json.label;
            let val = json.value;
            if (!label) return;
            if (this.isJson(label)) {
                this.aryLabel.push(label)
            } else {
                this.aryLabel = label.split(",");
            }
            if (this.isJson(val)) {
                this.aryVal.push(val)
            } else {
                this.aryVal = val.split(",");
            }
        },
        // 判断数据是否为JSON
        isJson(str) {
            if (Array.isArray(str)) {
                if (str[0] instanceof Object) {
                    return true;
                } else {
                    return false;
                }
            } else if (str instanceof Object) {
                return true;
            } else if (typeof str == 'string' && str.indexOf("{") != -1 && str.indexOf("}") != -1) {
                return true;
            }
            return false;
        },
        linkSkip() {
            if (!this.canEdit) {
                this.$emit("linkSkip")
            }
        },
        removeSingle() {
            this.$emit("buttonSelect", '');
        },
        removeSelect(idx) {
            this.aryLabel.splice(idx, 1);
            this.aryVal.splice(idx, 1);
            if (this.aryVal.length == 0) {
                this.$emit("buttonSelect", "");
            } else {
                var json = {
                    label: this.aryLabel.join(","),
                    value: this.aryVal.join(",")
                };
                this.$emit("buttonSelect", JSON.stringify(json));
            }
        },
        getSingleVal(isAry, isId) {
            if (this.list.length == 0) {
                return isAry ? [] : "";
            }
            var jsonAry = [];
            for (var i = 0; i < this.list.length; i++) {
                var obj = this.list[i];
                var v = isId ? obj.id : obj.name;
                jsonAry.push(v);
            }
            return isAry ? jsonAry : jsonAry.join(",");
        },
        handSelect() {
            this.$emit('select', this);
        }
    },
    watch: {
        modelValue: {
            handler(val, oldVal) {
                this.init();
            },
            deep: true
        }
    }
}
</script>

<style scoped>
.canEdit {
    width: 1rem;
    height: 2rem;
    line-height: 2rem;
    margin-right: .5rem;
}

.canEdit i {
    color: rgba(255, 81, 81, 1);
    margin-left: 0.2rem;
}

.reblisr {
    float: left;
    width: 1rem;
    height: 2rem;
    line-height: 2rem;
    margin-right: 0.5rem;
    color: #aec2e3;
    font-size: 1.4rem;
}

.userlidt {
    display: flex;
    margin-right: 0.5rem;
    margin-bottom: .5rem;
}

.userFlex, .imgFlex {
    display: flex;
    background: #fff;
    padding: 0.2rem;
    margin: 0.5rem 0;
    flex-wrap: wrap;
}

.userFlex {
    padding: 0;
    margin: 0px !important;
}

.userFlex li {
    border-radius: 5px;
    background-color: #ebf2fe;
    min-height: 2rem;
    display: flex;
    align-items: center;
    padding-left: 0.3rem;
    padding-right: 0.3rem;
}

.addName {
    width: 2rem;
    height: 2rem;
    border: 1px solid #dadde0;
    border-radius: 5px;
    text-align: center;
    font-size: 1.1rem;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    overflow: hidden;
}

.addName i {
    color: #999999;
    font-size: 1rem;
}

.userFlex img {
    width: 0.7rem;
    float: left;
}

.nameTit {
    color: #555555;
    float: left;
    display: block;
    overflow: hidden;
    padding: .2rem 0rem;
}

.form-block .userFlex {
    margin: 0;
    padding-bottom: .25rem;
}
</style>
